<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				position: fixed;
				z-index: 999;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			.main {
				width: 100%;
				text-align: center;
				position: fixed;
				z-index: 999;
				top: 50px;
			}
			
			.main .nav {
				height: 42px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: #F5F5F5;
				width: 100%;
			}
			
			.main .line {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 2px;
				width: 100%;
				position: relative;
				top: -2px;
			}
			
			.main .line1,
			.main .line2 {
				height: 2px;
				width: 18px;
				background: #66BCD5;
			}
			
			.Detail {
				margin-top: 110px;
			}
			
			.Detail .template {
				margin: 15px;
				border: 1px solid #66BCD5;
				border-radius: 10px;
				overflow: hidden;
				position: relative;
			}
			
			.Detail .template .sanjiao {
				position: absolute;
				top: -25px;
				left: -25px;
				display: inline-block;
				width: 0;
				height: 0;
				border-width: 25px;
				overflow: hidden;
				border-color: #66BCD5 transparent transparent;
				border-style: solid dotted dotted;
				transform: rotate(135deg);
			}
			/*.Detail .example:after{
				content: "1";
				display: block;
				width: 20px;
				height: 20px;
				color: white;
				font-size: 5px;
				position: absolute;
				top: 5px;
				left: 5px;
				z-index: 999;
				transform: rotate(30deg);
			}*/
			
			.Detail .template .number {
				display: block;
				width: 20px;
				height: 20px;
				color: white;
				font-size: 10px;
				position: absolute;
				top: 5px;
				left: 5px;
				z-index: 999;
				transform: rotate(15deg);
				-ms-transform: rotate(15deg);
				-moz-transform: rotate(15deg);
				-webkit-transform: rotate(15deg);
				-o-transform: rotate(15deg);
			}
			
			.Detail .template ul {
				padding: 0 15px;
			}
			
			.Detail .template ul li:first-child {
				padding: 0 10px;
			}
			
			.Detail .template ul li {
				padding: 0 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 45px;
				border-bottom: 1px solid #D6D6D6;
			}
			
			.Detail .template ul li:last-child {
				border-bottom: none;
			}
			
			.Detail .template ul li span:last-child {
				color: black;
			}
			
			.noOrder {
				font-size: 15px;
				text-align: center;
			}
			
			.noOrder img {
				display: block;
				margin: 194px auto 40px;
				width: 144px;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div>
			</div>
			<div class="content">订单详情</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="main">
			<div class="nav">
				<div class="today">
					今日订单
				</div>
				<div class="month">
					本月订单
				</div>
			</div>
			<div class="line">
				<div class="line1"></div>
				<div class="line2" style="visibility:  hidden;"></div>
			</div>
		</div>
		<div class="Detail todayDetail" style="display: none;">
		</div>
		<div class="Detail monthDetail" style="display: none;">
		</div>
		<div class="noOrder">
			<img src="../../statics/images/cityPartner/order/empty.png" />
			<span>当前没有订单哦~</span>
		</div>

	</body>
	<script id="template" class="clearfix" type="text/html">
		<div class="template">
			<div class="sanjiao"></div>
			<div class="number">{id}</div>
			<ul class="ul">

			</ul>
		</div>
	</script>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>

	<script type="text/javascript">
		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		$(".today").on("click", function() {
			$(".line2").css("visibility", "hidden");
			$(".line1").css("visibility", "visible");
			$(".todayDetail").show();
			$(".monthDetail").hide();
		})
		$(".month").on("click", function() {
			$(".line1").css("visibility", "hidden");
			$(".line2").css("visibility", "visible");
			$(".todayDetail").hide()
			addData(data1, $(".monthDetail"))
		})
		var data = [{
			companyName: "杭州鲜花责任有限公司",
			count: "0.25",
			"goodDetail": [{
				goodsname: "玫瑰花",
				good_num: 100
			}, {
				goodsname: "玫瑰花",
				good_num: 100
			}, {
				goodsname: "玫瑰花",
				good_num: 100
			}, {
				goodsname: "菊花",
				good_num: 100
			}]
		}];
		var data1 = [{
			"companyName": "\u6211\u53cd\u5012\u662f\u5feb\u653e\u5047\u8be5\u62cd\u516c\u53f8",
			"count": "0.25",
			"goodDetail": [{
				"good_id": 43,
				"good_num": 1,
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829223440120.jpg",
				"goodsname": "\u5df4\u897f\u53f6",
				"price": 0.01
			}]
		}, {
			"companyName": "\u6211\u53cd\u5012\u662f\u5feb\u653e\u5047\u8be5\u62cd\u516c\u53f8",
			"count": "0.01",
			"goodDetail": [{
				"good_id": "62",
				"good_num": "1",
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924191626691.jpg",
				"goodsname": "\u6d45\u84dd\u7ee3\u7403",
				"price": "0.01"
			}]
		}, {
			"companyName": "kkkk",
			"count": "0.01",
			"goodDetail": [{
				"good_id": "62",
				"good_num": "1",
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924191626691.jpg",
				"goodsname": "\u6d45\u84dd\u7ee3\u7403",
				"price": "0.01"
			}]
		}, {
			"companyName": "\u559c\u76c8\u95e8\u5a5a\u793c",
			"count": "515.00",
			"goodDetail": [{
				"good_id": 177,
				"good_num": 10,
				"img": "http:\/\/img.like-your.com\/Fj1GtzG7DXcUbznNyZA-i7aVm6vs",
				"goodsname": "\u739b\u5229\u4e9a",
				"price": 13.5
			}, {
				"good_id": 54,
				"good_num": 2,
				"img": "http:\/\/img.like-your.com\/uploads\/20160917\/20160917085447411.jpg",
				"goodsname": "\u96ea\u5c71",
				"price": 14.5
			}, {
				"good_id": 34,
				"good_num": 6,
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829163522418.jpg",
				"goodsname": "\u7c89\u7ee3\u7403",
				"price": 22
			}, {
				"good_id": 63,
				"good_num": 4,
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924192036430.jpg",
				"goodsname": "\u7c89\u7ea2\u96ea\u5c71",
				"price": 20
			}, {
				"good_id": 49,
				"good_num": 1,
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829224915414.jpg",
				"goodsname": "\u94f6\u53f6\u83ca",
				"price": 18
			}, {
				"good_id": 182,
				"good_num": 1,
				"img": "http:\/\/img.like-your.com\/Fh7JF5vnY_0fkoR7opME_5XlY5tf",
				"goodsname": "\u6849\u6811\u53f6 \u7ec6\u53f6",
				"price": 9
			}, {
				"good_id": 78,
				"good_num": 2,
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924194019762.jpg",
				"goodsname": "\u871c\u6843\u96ea\u5c71",
				"price": 18
			}]
		}, {
			"companyName": "\u559c\u76c8\u95e8\u5a5a\u793c",
			"count": "496.00",
			"goodDetail": [{
				"good_id": "49",
				"good_num": "1",
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829224915414.jpg",
				"goodsname": "\u94f6\u53f6\u83ca",
				"price": "16.50"
			}, {
				"good_id": "35",
				"good_num": "4",
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829163652818.jpg",
				"goodsname": "\u7c89\u8272\u5eb7\u4e43\u99a8",
				"price": "13.50"
			}, {
				"good_id": "34",
				"good_num": "2",
				"img": "http:\/\/img.like-your.com\/uploads\/20160829\/20160829163522418.jpg",
				"goodsname": "\u7c89\u7ee3\u7403",
				"price": "20.00"
			}, {
				"good_id": "60",
				"good_num": "2",
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924190914871.jpg",
				"goodsname": "\u6d45\u7c89\u7ee3\u7403",
				"price": "18.00"
			}, {
				"good_id": "63",
				"good_num": "2",
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924192036430.jpg",
				"goodsname": "\u7c89\u7ea2\u96ea\u5c71",
				"price": "24.50"
			}, {
				"good_id": "78",
				"good_num": "2",
				"img": "http:\/\/img.like-your.com\/uploads\/20160924\/20160924194019762.jpg",
				"goodsname": "\u871c\u6843\u96ea\u5c71",
				"price": "22.00"
			}, {
				"good_id": "102",
				"good_num": "2",
				"img": "http:\/\/img.like-your.com\/uploads\/20160925\/20160925103530539.jpg",
				"goodsname": "\u7c89\u4f73\u4eba",
				"price": "24.50"
			}, {
				"good_id": "177",
				"good_num": "3",
				"img": "http:\/\/img.like-your.com\/Fj1GtzG7DXcUbznNyZA-i7aVm6vs",
				"goodsname": "\u739b\u5229\u4e9a",
				"price": "22.00"
			}]
		}];

		addData(data, $(".todayDetail"))

		function addData(data, htm) {
			var html = '';
			var ul = "";
			if(data.length > 0) {
				$(".noOrder").hide();
				for(var i = 0; i < data.length; i++) {
					var htmlm = $("#template").html();
					htmlm = htmlm.replace(/\{id\}/, i + 1);
					html += htmlm;
				}
				htm.html(html);
				htm.show();

				for(var j = 0; j < data.length; j++) {
					ul += '<li><span>总价格：' + data[j].count + '</span><span>' + data[j].companyName + '</span></li>';
					for(var k = 0; k < data[j].goodDetail.length; k++) {
						ul += '<li><span>' + data[j].goodDetail[k].goodsname + '</span><span>' + data[j].goodDetail[k].good_num + '</span></li>';
					}
					htm.find(".ul").eq(j).html(ul);
					ul = "";
				}

			} else {
				$(".noOrder").show()
			}
		}

		//		data.sites.map((value, index) => {
		//			var htmlm = $("#template").html();
		//			htmlm = htmlm.replace(/\{\{id\}\}/, value.id);
		//			htmlm = htmlm.replace(/\{\{name\}\}/, value.name);
		//			htmlm = htmlm.replace(/\{\{address\}\}/, value.address);
		//			htmlm = htmlm.replace(/\{\{time\}\}/, value.time);
		//			htmlm = htmlm.replace(/\{\{phone\}\}/, value.phone);
		//			htmlm = htmlm.replace(/\{\{orderNumber\}\}/, value.orderNumber);
		//			html += htmlm;
		//		});

		//								var html = '';
		//								data.sites.map((value, index) => {
		//									var htmlm = `<div class="template">
		//										<div class="sanjiao"></div>
		//										<div class="number">${value.id}</div>
		//										<ul>
		//											<li><span>公司名称</span><span>${value.name}</span></li>
		//											<li><span>公司地址</span><span>${value.address}</span></li>
		//											<li><span>注册时间</span><span>${value.time}</span></li>
		//											<li><span>联系电话</span><span>${value.phone}</span></li>
		//											<li style="border-bottom: none;"><span>下单数量</span><span>${value.orderNumber}</span></li>
		//										</ul>
		//									</div>`;
		//									html += htmlm;
		//								});
		//								$(".todayDetail").html(html);
	</script>

</html>